<template>
	<orh-trees>
		<Tree :data="trees" :load-data="loadData" @on-select-change="getNodes" slot="trees"></Tree>
		<Button type="primary" size="small" @click="application" style="margin-top: 10px;margin-left:10px"  v-button="'test_time_add'" slot="content">
	      应用其他学期的作息时间</Button>
		 <orh-sub-table slot="content">	
			<Card class="timetable-testtime" slot="table">
				<p slot="title">详细作息时间</p>
				<div class="bed_content">
					<table class="tatle">
						<thead>
							<tr>
								<th>作息时间名称</th>
								<th>时间段</th>
								<th>开始周</th>
								<th>结束周</th>
								<th>类型</th>
								<th>排序</th>
								<th>编辑</th>
							</tr>
						</thead>
					</table>
					<Row type="flex" align="middle">
						<table class="flex-content">
							<tr v-for="(item,index) in timeList" :key="index">
								<td>
									<Input v-if="timeList[index].name != null" v-model="timeList[index].name.zh" placeholder="请输入作息名称">
									</Input>
									<Input v-else v-model="formValidate.name.zh" placeholder="请输入作息名称">
									</Input>
								</td>
								<td>
									<TimePicker type="timerange" placement="bottom-end" v-if="timeList[index].time !=null" v-model="timeList[index].time" placeholder="请选择时间段" style="width: 150px" :transfer="transfer"></TimePicker>
									<TimePicker v-else type="timerange" placement="bottom-end" v-model="formValidate.time" placeholder="请选择时间段" :transfer="transfer"></TimePicker>
								</td>
								<td>
									<Select v-if="timeList[index].start_week !=null" v-model="timeList[index].start_week" placeholder="开始周">
										<Option v-for="val in courList" :value="val.id" :key="val.id">{{ val.name }}</Option>
									</Select>
									<Select v-else v-model="formValidate.start_week" placeholder="开始周">
										<Option v-for="val in courList" :value="val.id" :key="val.id">{{ val.name }}</Option>
									</Select>
								</td>
								<td>
									<Select v-if="timeList[index].end_week !=null" v-model="timeList[index].end_week" placeholder="结束周">
										<Option v-for="val in courList" :value="val.id" :key="val.id">{{ val.name }}</Option>
									</Select>
									<Select v-else v-model="formValidate.end_week" placeholder="结束周">
										<Option v-for="val in courList" :value="val.id" :key="val.id">{{ val.name }}</Option>
									</Select>
								</td>
								<td>
									<Select v-if="timeList[index].dictionary !=null" v-model="timeList[index].dictionary.dictionary_id" placeholder="类型">
										<Option v-for="val in typeList" :value="val.dictionary_id" :key="val.value">{{ val.dictionary_name.zh?val.dictionary_name.zh:val.dictionary_name.mn }}</Option>
									</Select>
									<Select v-else v-model="formValidate.type" placeholder="类型">
										<Option v-for="val in typeList" :value="val.dictionary_id" :key="val.dictionary_id">{{ val.dictionary_name.zh?val.dictionary_name.zh:val.dictionary_name.mn }}</Option>
									</Select>
								</td>
								<td>
									<Input v-if="timeList[index].order !=null" v-model="timeList[index].order" placeholder="请输入排序">
									</Input>
									<Input v-else v-model="formValidate.order" placeholder="请输入排序序号">
									</Input>
								</td>
								<td>
									<div class="edit_tag">
										<Button v-button="'test_time_edit'" type="primary" size="small" @click="updateStation(timeList[index].id,timeList[index].name,timeList[index].time,timeList[index].start_week,timeList[index].end_week,timeList[index].dictionary.dictionary_id,timeList[index].order)"
											style="background:limegreen">确认修改</Button>
										<Button v-button="'test_time_del'" type="primary" size="small" @click="deleteStation(timeList[index].id)">删除</Button>
									</div>
								</td>
							</tr>
							<tr v-if="timeTestId != null">
									<td>
										<Input v-model="form.name.zh" placeholder="请输入作息名称">
										</Input>
									</td>
									<td>
										<TimePicker type="timerange" placement="bottom-end" v-model="form.time" placeholder="请选择时间段" :transfer="transfer"></TimePicker>
									</td>
									<td>
										<Select v-model="form.start_week" placeholder="开始周">
											<Option v-for="val in courList" :value="val.id" :key="val.id">{{ val.name }}</Option>
										</Select>
									</td>
									<td>
										<Select v-model="form.end_week" placeholder="结束周">
											<Option v-for="val in courList" :value="val.id" :key="val.id">{{ val.name }}</Option>
										</Select>
									</td>
									<td>
										<Select v-model="form.type" placeholder="类型">
											<Option v-for="val in typeList" :value="val.dictionary_id" :key="val.dictionary_id">{{ val.dictionary_name.zh?val.dictionary_name.zh:val.dictionary_name.mn }}</Option>
										</Select>
									</td>
									<td>
										<Input v-model="form.order" placeholder="请输入排序序号">
										</Input>
									</td>
									<td>
										<div class="edit_tag">
											<Button v-button="'test_time_add'" type="primary" size="small" @click="addStation('form')">确认添加</Button>
										</div>
									</td>
								</Form>
							</tr>
						</table>
					</Row>
				</div>
				<Spin size="large" fix v-if="spinShow"></Spin>
			</Card>
		</orh-sub-table>

		<Modal v-model="prompt" title="数据删除" :loading="loading" @on-ok="asyncOK" slot="others">
			<p>{{ cont }}</p>
		</Modal>
		<Modal slot="others" v-model="uploadStatus" :closable="false" @on-ok="updeteSubmit" @on-cancel="upCancel" >
			<div class="test-time-list">
				<Select v-model="formInine.semester_id" placeholder="请选择学期" clearable >
					<Option v-for="item in semesterList" :value="item.semester_id" :key="item.value">
						{{item.semester_name.zh?item.semester_name.zh:item.semester_name.mn}}
					</Option>
				</Select>
				
				<Select v-model="formInine.noon_rest" placeholder="请选择有无午休" clearable >
					<Option :value="0">
						没有午休
					</Option>
					<Option :value="1">
						有午休
					</Option>
				</Select>
			</div>
        </Modal>
	</orh-trees>
</template>

<script>
	export default {	
		name:'basicmodule-testtime',
		layout:'menu',
		data() {
			return {
				// 控制添加组件显示
				prompt: false, //批量删除的弹框
				loading: true,
				transfer: true,
				spinShow: false,
				uploadStatus:false,
				cont: "您确定要删除这些数据吗",
				courList: [],
				semesterList:[],
				timeTestId: null,	
				formInine:{
					semester_id:'',
					noon_rest:'',
					now_semester:''
				},			
				// 创建
				form: {
					time: [],
					start_week: '',
					end_week: '',
					noon_rest: '',
					semester_id: '',
					name: {
						zh: null,
						mn: null,
						en: null,
					},
					type: '',
					order: ''
				},
				formValidate: {
					time: [],
					start_week: '',
					end_week: '',
					noon_rest: '',
					semester_id: '',
					name: {
						zh: null,
						mn: null,
						en: null,
					},
					type: '',
					order: ''
				},
				// 菜单树
				trees: [],
				timeList: [],
				typeList: [],
				nootList: '',
				parend_id: '',
				now_semesterId: '',
			};
		},
		methods: {
			instance(type, message) {
				let title = '标题';
				let content = '提示内容';
				if (message) {
					title = message.title ? message.title : "";
					content = message.content ? message.content : "";
				}
				switch (type) {
					case 'info':
						this.$Modal.info({
							title: title,
							content: content
						});
						break;
					case 'success':
						this.$Modal.success({
							title: title,
							content: content
						});
						break;
					case 'warning':
						this.$Modal.warning({
							title: title,
							content: content
						});
						break;
					case 'error':
						this.$Modal.error({
							title: title,
							content: content
						});
						break;
				}
			},
			//应用其他学期
			application(){
				if (!this.adds) {
					this.instance('error', {
						'title': '请先选择学期!',
						'content': '必须先选择学期才能进行应用其他学期数据！'
					});
					return false;
				}else{
					this.uploadStatus = true
				}
			},
			//加载学年信息
			load() {
				this.$http.get('api/semester/v1/schoolyear/info').then(val=>{
					this.trees = this.process(val.data)
				}).catch(err =>{
					this.$Message.error('学年加载失败！')
				});
			},
			// 处理学年信息
			process(data) {
				let arr = [];
				data.forEach(item => {
					item.title = item.schoolyear_name.zh?item.schoolyear_name.zh:item.schoolyear_name.mn;
					item.value = item.schoolyear_id;
					item.loading = false;
					item.children = [];
					arr.push(item);
				});
				return arr;
			},
			//异步加载学期和有无午休树形菜单
			loadData(item, callback) {
				let arr = [];
				this.$http.get('api/semester/v1/semester/all_semester?schoolyear_id=' +item.schoolyear_id).then(val => {
					val.data.forEach(res => {
						arr.push({
							value: res.semester_id,
							title: res.semester_name.zh?res.semester_name.zh:res.semester_name.mn,
							loading: false,
							children: [{
									value: 0,
									title: '没有午休',
									parent_id: res.semester_id
								},
								{
									value: 1,
									title: '有午休',
									parent_id: res.semester_id
								}
							]
						});
					});
					callback(arr);
				});
			},
			getNodes(arr) {
				this.timeTestId = arr[0].value;
				this.form.noon_rest = arr[0].value;
				this.form.semester_id = arr[0].parent_id;
				this.formValidate.semester_id = arr[0].parent_id;
				this.formValidate.noon_rest = arr[0].value;
				this.loadStation(arr[0]);
				this.courseList();
			},
			//获取学期
			morensemesterList() {
                this.$http.get('api/semester/v1/semester/semesterlists').then(val => {
					this.semesterList = val.data
                })
            },
			//通过有无午休查询作息时间
			loadStation(index) {
				this.parend_id = index.parent_id;
				this.nootList = index.value;
				this.loadTime();
			},
			loadTime() {
				if (this.parend_id != null) {
					this.spinShow = true;
					this.$http.get('api/course/v1/timetable/index/' +this.parend_id +'?noon_rest=' +this.nootList).then(val => {
						val.data.forEach(item => {
							if (item.start_week != null) {
								item.start_week = parseInt(item.start_week);
							}
							if (item.end_week != null) {
								item.end_week = parseInt(item.end_week);
							}
							if (item.time != null) {
								item.time = item.time.split("-");
							}
						});
						this.timeList = val.data;
						this.spinShow = false;
					})
				}	
			},
			//学期下的周
			courseList() {
				this.$http.get('api/course/v1/course_arrange/cycle?semester_id=' + this.parend_id).then(val => {
					this.courList = val.data;
				});
			},
			//应用提交
			updeteSubmit(){
				this.formInine.now_semester = this.form.semester_id
				this.$http.post('api/course/v1/timetable/get_timetable',this.formInine).then(val=>{
					this.$Message.success(this.$t('add_success'));	
					this.loadTime();
				}).catch(err =>{
					this.$Message.error(this.$t('add_error'))
				});
			},
			//
			upCancel(){
				this.uploadStatus = false
			},
			//时间类型
			timeType() {
				this.$http.get('api/dictionary/v1/dictionary/pidquerys?timetable_type').then(val => {
					this.typeList = val.data.timetable_type;
				});
			},
			//单条删除
			deleteStation(index) {
				this.del = [];
				this.del.push(index);
				this.asyncOK();
			},
			//删除作息时间
			asyncOK() {
				this.del = JSON.stringify(this.del);
				this.$http.delete('api/course/v1/timetable/delete/' +this.del +'?semester_id=' +this.parend_id).then(val => {
					this.$Message.success(this.$t('delete_success'));	
					this.prompt = false;
					this.loadTime();
				}).catch(err =>{
					this.$Message.error(this.$t('delete_error'))
				});
			},
			//添加作息时间
			addStation(name) {
				if (this.form.time.length !=0 && this.form.start_week !=null && this.form.end_week !=null && this.form.type !=null && this.form.name.zh !=null ) {

					this.form.time=this.form.time[0].split(' ')[0] +
							'-' +
							this.form.time[1].split(' ')[0]
					this.$http.post('api/course/v1/timetable/edit',this.form).then(res=>{
						this.$Message.success(this.$t('add_success'));
						this.loadTime();
					}).catch(err =>{
						this.$Message.error(this.$t('delete_error'))
					});
				} else {
					this.$Message.error(this.$t('Please_fill_in_the_complete'));
				}
			},
			//修改作息时间
			updateStation(id, name, time, start_week, end_week, type, order) {
				let name_zh = null;
				let timelist = null;
				let startweek = null;
				let endweek = null;
				let timetype = null;
				let timeorder = null;
				if (name == null) {
					name_zh = this.formValidate.name.zh;
				} else {
					name_zh = name;
				}
				if (time != null) {
					timelist =
						time[0].split(' ')[0] +
						'-' +
						time[1].split(' ')[0];
				} else {
					timelist =
						this.formValidate.time[0].split(' ')[0] +
						'-' +
						this.formValidate.time[1].split(' ')[0];
				}
				if (start_week != null) {
					startweek = start_week;
				} else {
					startweek = this.formValidate.start_week;
				}
				if (end_week != null) {
					endweek = end_week;
				} else {
					endweek = this.formValidate.end_week;
				}
				if (type == null) {
					timetype = this.formValidate.type;
				} else {
					timetype = type;
				}
				if (order == null) {
					timeorder = this.formValidate.order;
				} else {
					timeorder = order;
				}
				let temp = ''
				temp = {
					time: timelist,
					start_week: startweek,
					end_week: endweek,
					type: timetype,
					order: timeorder,
					name: {
						mn:null,
						en:null,
						zh:name_zh
					},
					semester_id: this.formValidate.semester_id,
					noon_rest: this.formValidate.noon_rest,
					id: id
				};
				this.$http.post('api/course/v1/timetable/edit', temp).then(val => {
					this.$Message.success(this.$t('edit_success'));
					this.loadTime();							
				}).catch(err =>{
					this.$Message.error(this.$t('edit_error'))
				});	
			},
		},
		created() {
			this.load();
			this.timeType();
			this.morensemesterList()
			this.$http.get('api/semester/v1/semester/now_semester').then(val => {
				this.now_semesterId = val.data[1].semester_id
			})
		},
		computed:{
			adds(){
				if(this.parend_id !=null){
					return true
				}else{
					return false
				}
			}
		}
	};
</script>

<style lang="less">
	.timetable-testtime {
		width: 880px;
		margin-top: 25px;	
		.bed_content {
            width:100%;
            table.tatle {
                width: 100%;
                height: 50px !important;
                background: #f8f8f9;
                display: inline-table;
                padding: 7px 0 7px 0;
                thead {
                    tr {
                        width: 100%;
                        height: 50px;
                        padding-left: 10px;
                        padding-right: 10px;
                        th {
                            width: 14%;
                        }
                        .admin {
                            border-right: 0px;
                        }
                    }
                }
            }
            table.flex-content {
                width: 100%;
                tr {
                    height: 50px;
                    width: 100%;
                    td {
                        width: 120px;
                        text-align: center;
                        .edit_tag {
                            display: flex;
                            justify-content: flex-end;
                            align-items: center;
                            button {
                                margin-right: 5px;
                            }
                        }
                    }
                    .ivu-form-item.ivu-form-item-required {
                        width: 100%;
                        text-align: center;
                    }
                    .ivu-form-item-content {
                        width: 100%;
                        text-align: center;
                    }
                    
				}
				tr{
					form.ivu-form.ivu-form-label-right{
						width:100%;
					}
				}
            }
        }
		
	}
	.test-time-list{
		height:150px;
		.ivu-select.ivu-select-single {
			margin-top:10px;
			width:80%;
			height: 50px;
			text-align: center;
			margin-left: 40px;
		}
	}
</style>



